<template>
    <el-drawer class="text-sm p-0" v-model="dialog" title="物流信息" size="35%" :destroy-on-close="true">
        <!-- 订单信息-->
        <div class="flex ml-4 align-middle">
            <el-image :src="info.logo" fit="fill" :lazy="true" style="width:64px;height:64px"></el-image>
            <div class="mt-4 ml-3">
                <div>物流公司：{{ info.typename }}</div>
                <div>物流单号 {{ info.number }}</div>
            </div>
        </div>
        <el-divider border-style="dashed" />
        <div style="margin-left:-30px">
            <el-timeline>
                <el-timeline-item v-for="(item, index) in info.list" :key="index" :timestamp="item.time" placement="top">
                    <span> {{ item.status }}</span>
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { getShipInfo } from '~/api/order.js'
const dialog = ref(false)

// 物流信息
const info = ref({})

const infoId = ref(0)
const open = (id) => {
    infoId.value = id
    console.log(id);
    getShipInfo(infoId.value).then(res => {
        console.log(res);
        info.value = res.result
    })
    dialog.value = true
}

defineExpose({
    open
})
</script>

<style scope>
</style>